<template>
  <view style="padding-bottom: 130rpx">
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="sc" @click="goBack">
      <u-icon name="star" size="24" color="#fff" v-if="!isSc"></u-icon>
      <u-icon name="star-fill" size="24" v-else c olor="#5CCBC1"></u-icon>
    </view>
    <u-swiper :list="goodInfo?.goodBannerLst" height="305"></u-swiper>
    <view class="main">
      <view class="price">
        <view class="l"><text>￥</text>{{ goodInfo?.oldPrice }}</view>
        <view class="hyPri"><text>会员价￥</text>{{ goodInfo?.price }}</view>
      </view>
      <view class="label">立省 ¥ {{ +goodInfo?.oldPrice - +goodInfo?.price }} </view>
      <view class="title">
        <!-- <text class="goodText">旗舰好货</text> -->
        {{ goodInfo?.title }}
      </view>
      <view class="gm"> {{ goodInfo?.sellSum }} +已购买</view>
    </view>
    <view class="main">
      <view class="bitem" v-if="listInfo[0].length > 0" @click="show = true">
        <view class="l">选择</view>
        <view class="r">
          <text>{{ formData.specsNoCN }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="bitem">
        <view class="l">数量</view>
        <view class="r">
          <view style="display: flex; width: 100%; justify-content: flex-end">
            <u-number-box :step="1" button-size="28" :min="1" :max="999" v-model="formData.goodSum"></u-number-box>
          </view>
        </view>
      </view>
      <u-picker :show="show" keyName="specs" :columns="listInfo" @cancel="bankCancel" @confirm="selectClick"></u-picker>

      <view class="bitem">
        <view class="l">发货</view>
        <view class="r">
          <text>{{ goodInfo?.description }}</text>
        </view>
      </view>
      <view class="bitem">
        <view class="l">保障</view>
        <view class="r">
          <text>7天无理由</text>
        </view>
      </view>
    </view>
    <!-- <view style="padding: 0 26rpx">
      <FyItem />
    </view> -->
    <view class="main">
      <view>图文详情</view>
      <view class="spxq">
        <image v-for="(item, index) in goodInfo?.goodImgLst" :src="item" :key="index" mode="widthFix" />
      </view>
    </view>
    <view class="bottomBox">
      <view class="tjgwc">
        <view class="b" @click="goPage(`/pages/shop/ptShopInfo`)">
          <image :src="goodInfo?.shopHeadUrl" mode="aspectFill" />
          <view>商户</view>
        </view>
        <view class="b" @click="call">
          <image src="../../../static/shop/kf.png" mode="aspectFill" />
          <view class="z">客服</view>
        </view>
        <view class="b" @click="goPage('/pages/shop/shopCar')">
          <image src="../../../static/shop/gwc.png" mode="aspectFill" />
          <view class="z">购物车</view>
        </view>
      </view>
      <view class="btn">
        <view class="gwcIcon" @click="addCarFn"> 加入购物车 </view>
        <view class="gwcbtn" @click="goBuy">立即购买</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import FyItem from "../../home/components/FyItem.vue";
import { onMounted, ref } from "vue";
import { addBuyCar, selectGoldDetail, selectGoodSpecs } from "@/api/order";
import { useStore } from "@/stores/counter";
const { goodId } = defineProps<{
  goodId: any;
}>();
const listInfo = ref([[]]);
const show = ref(false);
const goodInfo = ref();
const formData = ref({
  goodId,
  goodSum: 1,
  specsNo: "",
  specsNoCN: "",
  userId: uni.getStorageSync("userId"),
});
onMounted(async () => {
  const res = await selectGoldDetail({
    goodId: goodId,
  });
  goodInfo.value = res.goodInfo;
  const res1 = await selectGoodSpecs({
    goodId: goodId,
  });
  console.log(res1.specLst);

  if (res1.specLst.length > 0) {
    formData.value.specsNoCN = res1.specLst[0].specs;
    formData.value.specsNo = res1.specLst[0].specsNo;
    listInfo.value = [res1.specLst];
  }
});
const isSc = ref(false);
const goBuy = async () => {
  const userId = uni.getStorageSync("userId");
  if (!userId) {
    uni.redirectTo({ url: "/pages/login/login" });
    return;
  }
  useStore().setGoodsInfo([{ ...goodInfo.value, ...formData.value }]);
  uni.navigateTo({
    url: `/pages/shop/goodsDetails/goodOrder?type=putong`,
  });
};
const selectClick = (info: any) => {
  formData.value.specsNo = info.value[0].specsNo;
  formData.value.specsNoCN = info.value[0].specs;
  show.value = false;
};
const bankCancel = () => {
  show.value = false;
};
const call = () => {
  uni.makePhoneCall({
    phoneNumber: goodInfo.value.shopCell, //仅为示例
  });
};
const addCarFn = async () => {
  await addBuyCar(formData.value);
  uni.showToast({
    title: "添加成功",
    icon: "success",
  });
};
</script>
<style lang="less" scoped>
.sc {
  position: absolute;
  top: 102rpx;
  right: 32rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(176, 176, 176, 0.5);
  z-index: 99;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx 24rpx;
  .price {
    display: flex;
    align-items: center;
    .l {
      font-size: 46rpx;
      color: #ea3b3b;
      margin-right: 32rpx;
      text {
        font-size: 24rpx;
      }
    }
    .hyPri {
      background: #ea3b3b;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      padding: 4rpx 18rpx;
      color: #ffffff;
      font-size: 36rpx;
      display: flex;
      align-items: center;
      text {
        font-size: 24rpx;
      }
    }
  }
  .label {
    font-size: 22rpx;
    color: #ea3b3b;
    background: #ffecec;
    width: 116rpx;
    height: 30rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    text-align: center;
  }
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    margin-top: 18rpx;
    .goodText {
      background: #ea3b3b;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #fff;
      text-align: center;
      padding: 2rpx 4rpx;
      margin-right: 4rpx;
    }
  }
  .gm {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8d;
    margin-top: 36rpx;
  }
}
.bitem {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  .l {
    font-size: 24rpx;
    color: #8a8a8d;
    margin-right: 48rpx;
  }
  .r {
    width: calc(100% - 120rpx);
    font-size: 24rpx;
    color: #333333;
    display: flex;

    justify-content: flex-end;
  }
  &:last-child {
    margin-bottom: 0rpx;
  }
}
.spxq {
  margin-top: 20rpx;
  image {
    width: 100%;
  }
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  .tjgwc {
    display: flex;
    align-items: center;
    .b {
      font-size: 24rpx;
      color: #595959;
      margin-right: 30rpx;
      text-align: center;
      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }
    }
  }
  .btn {
    display: flex;
    .gwcIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1faf9;
      border-radius: 200rpx 0rpx 0rpx 200rpx;
      font-size: 28rpx;
      color: #81d8d0;
      padding: 0 24rpx;
    }
    .gwcbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #81d8d0;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      border-radius: 0rpx 200rpx 200rpx 0rpx;
      padding: 0 24rpx;
    }
  }
}
</style>
